<template>
  <div id="IdentifiedDetails">
    <div class="top">
      <img style="width:80%;margin: 0 auto" src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/YPC/12.png" />
      <p>
        <span style="width: 95px;display: inline-block;text-align: left;">基本信息</span>
        <span style="width: 170px;display: inline-block;text-align: center">鉴定信息</span>
        <span style="width: 100px;display: inline-block;text-align: right">危改审批</span>
      </p>
    </div>
    <div class="content">
      <p style="height: 50px;display: flex;align-items: center;border-bottom: 1px solid #D2D2D2;">
        <span style="margin-right: 10px;" class="line"></span>
        基本信息
      </p>
      <div class="list">
        <ul>
          <li v-for="(item,index) in JBXXcontentData" :key="index" :style="{borderBottom:index===JBXXcontentData.length-1?'none':'1px solid #D2D2D2'}">
            <span style="margin-right: 20px;font-size: 14px;">{{item.name}}</span>
            <span v-if="item.value == 'F_SCITY'||item.value == 'F_XCITY'||item.value == 'F_VILLAGE'||item.value == 'F_SSZZ'" style="float: right;font-size: 14px;">{{rowData[item.value] | inUseName1(item.children)}}</span>
            <span v-else-if="item.children" style="float: right;font-size: 14px;">{{rowData[item.value] | inUseName(item.children)}}</span>
            <span v-else style="float: right;font-size: 14px;">{{rowData[item.value]}}</span>
          </li>
        </ul>
      </div>
      <p style="height: 50px;display: flex;align-items: center;border-bottom: 1px solid #D2D2D2;">
        <span style="margin-right: 10px;" class="line"></span>
        鉴定机构
      </p>
      <div class="list">
        <ul>
          <li v-for="(item,index) in JDJGcontentData" :key="index" :style="{borderBottom:index===JDJGcontentData.length-1?'none':'1px solid #D2D2D2'}">
            <span>{{item.name}}</span>
            <span v-if="item.name=='通知鉴定时间'" style="float: right">{{rowData.TZJDKSSJ?rowData.TZJDKSSJ.split(" ")[0]:""}}-{{rowData.TZJDJSSJ?rowData.TZJDJSSJ.split(" ")[0]:''}}</span>
            <span v-else style="float: right">{{rowData[item.value]}}</span>
          </li>
        </ul>
      </div>
      <p style="height: 50px;display: flex;align-items: center;border-bottom: 1px solid #D2D2D2;margin-bottom: 20px;">
        <span style="margin-right: 10px;" class="line"></span>
        鉴定信息
      </p>
      <div class="list">
        <ul>
          <li v-for="(item,index) in JDXXcontentData" :key="index" :style="{borderBottom:index===JDXXcontentData.length-1?'none':'1px solid #D2D2D2'}">
            <span>{{item.name}}</span>
            <span style="float: right">{{rowData[item.value]}}</span>
          </li>
        </ul>
      </div>
      <p style="height: 50px;display: flex;align-items: center;border-bottom: 1px solid #D2D2D2;margin-bottom: 20px;">
        <span style="margin-right: 10px;" class="line"></span>
        附件材料
      </p>
      <div class="file-list" style="margin-bottom: 10px;">
        <div v-for="(item, index) in fileData" :key="index" style="border-bottom: 1px solid #ebedf0">
          <p style="font-weight: bold;line-height: 40px">
            {{ item.name }}
          </p>
          <template v-if="item.fileList.length > 0">
            <span v-for="(items, index) in item.fileList" @click="fileOpen(items)" :key="index" style="
                display: inline-block;
                padding-bottom: 10px;
                color: #3f8ffc;
                text-decoration: underline;
              ">{{ items.FILENAME }}</span>
          </template>
          <template v-else>
            <span style="display: inline-block; padding-bottom: 10px">暂无附件</span>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import dd from "gdt-jsapi";
import { QuerySignCallback, FileServerProxy, GetFileData,dataTransFilePreview } from '@/utils/api'
export default {
  data() {
    return {
      rowData: {},
      JDJGData: {},
      JDXXData: {},
      JBXXcontentData: [
        {
          name: '姓名',
          value: 'F_HOUSEAPPLICANT'
        },
        {
          name: '身份证号',
          value: 'F_CERTIFICATECODE'
        },
        {
          name: '手机号',
          value: 'F_APPLYPHONE'
        },
        {
          name: '户籍地址',
          value: 'F_PERMANENTADDR'
        },
        {
          name: '申请方式',
          value: 'F_SQFS',
          children: []
        },
        {
          name: '代办人姓名',
          value: 'F_DBRXM',
        },
        {
          name: '代办人身份证号',
          value: 'F_DBRSFZH',
        },
        {
          name: '代办人手机号',
          value: 'F_DBRSJH',
        },
        {
          name: '所属市',
          value: 'F_SCITY',
          children: []
        },
        {
          name: '所属县',
          value: 'F_XCITY',
          children: []
        },
        {
          name: '所属村',
          value: 'F_VILLAGE',
          children: []
        },
        {
          name: '所属镇',
          value: 'F_SSZZ',
          children: []
        },
        {
          name: '东至',
          value: 'F_DONG'
        },
        {
          name: '西至',
          value: 'F_XIZHI'
        },
        {
          name: '南至',
          value: 'F_NANZHI'
        },
        {
          name: '北至',
          value: 'F_BEIZHI'
        },
        {
          name: '房屋编码',
          value: 'F_FWTYBH'
        },
        {
          name: '檐口高度',
          value: 'F_BUILDHEIGHT'
        },
        {
          name: '宅基地面积',
          value: 'F_HOMESTEADAREA'
        },
        {
          name: '住房建筑面积',
          value: 'F_HOUSEFLOORAREA'
        },
        {
          name: '占地面积',
          value: 'F_BUILDAREA'
        },
        {
          name: '建筑层数',
          value: 'F_BUILDSTOREY'
        },
        {
          name: '地类_农用地',
          value: 'F_DL_NYD',
          children: []
        },
        {
          name: '地类_农用地_其他',
          value: 'F_YDLX_NYD_QT'
        },
        {
          name: '用地类型',
          value: 'F_YDLX',
          children: []
        },
        {
          name: '建设类型',
          value: 'F_APPLYTYPE',
          children: []
        },
        {
          name: '地址',
          value: 'F_CONSTRUCITONADDRESS'
        },
      ],
      JDJGcontentData: [
        {
          name: '鉴定机构',
          value: 'JDJG'
        },
        {
          name: '鉴定机构负责人',
          value: 'JDJGFZR'
        },
        {
          name: '通知鉴定时间',
          value: ''
        },
      ],
      JDXXcontentData: [
        {
          name: '鉴定等级',
          value: 'JDJG'
        },
        {
          name: '鉴定人',
          value: 'JDJGFZR'
        },
        {
          name: '鉴定时间',
          value: 'JDSJ'
        },
        {
          name: '鉴定结论',
          value: 'JDJL'
        },
      ],
      fileData: [
        {
          name: '鉴定报告',
          groupGuid: '88d711ba-870c-40f2-a81d-71df8caeefd4',
          fileList: []
        },
        {
          name: '房屋照片',
          groupGuid: '8188d4d5-0898-44b9-b7f9-4f84dfb58f11',
          fileList: []
        }
      ]
    }
  },
  filters: {
    inUseName: function (msg, data) {
      let name = "";
      data.forEach((item) => {
        if (item.DICID == msg) {
          name = item.DICNAME;
        }
      });
      return name;
    },
    inUseName1: function (msg, data) {
      let name = ''
      data.forEach(item => {
        if (item.CITYCODE == msg) {
          name = item.CITYNAME
        }
      })
      return name
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        path: "/houseAppraisal",
      });
    },
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    //获取相关材料
    getFile: async function () {
      let groupGuid = []
      this.fileData.forEach(item => {
        groupGuid.push(item.groupGuid)
      })
      // const res1 = await GetFileData({
      //   groupGuid: groupGuid.join(','),
      //   toRowGuid: this.rowData.ROW_GUID
      // })

      let params = {
        accessCode: "1fdcbce42c6d4748a020feba618d54b8",
        cityCode: window.localStorage.getItem("citycode")
          ? window.localStorage.getItem("citycode")
          : "",
        params: {
          groupGuid: groupGuid.join(','),
          toRowGuid: this.rowData.ROW_GUID,
        },
      };
      const res1 = await QuerySignCallback(params);
      let data = JSON.parse(res1.data.data).FilesInfo;

      // if (res1.data.FilesInfo.length > 0) {
      //   res1.data.FilesInfo.forEach(element => {
      if (data.length > 0) {
        data.forEach(element => {
          this.fileData.forEach(item => {
            if (element.GROUPGUID == item.groupGuid) {
              this.getFileUrl(element, item);
              // element['file'] = {
              //   name: element.FILENAME
              // }
              // element['url'] =
              //   window.g.BaseURL +
              //   'FileServer/api/Preview?token=' +
              //   window.localStorage.getItem('token') +
              //   '&' +
              //   'fileGuid=' +
              //   encodeURIComponent(element.ROW_GUID)
              // item.fileList.push(element)
            }
          })
        })
      }
    },
     //获取附件文件流
    getFileUrl: async function (element, item) {
      let formData = new FormData();
      formData.append("accessCode", "98bcf528966e48ce896a8b3fd02d45d5");
      formData.append(
        "cityCode",
        window.localStorage.getItem("citycode")
          ? window.localStorage.getItem("citycode")
          : "441300000000"
      );
      formData.append(
        "paramStr",
        JSON.stringify({
          fileGuid: element.ROW_GUID,
        })
      );
      let response = await dataTransFilePreview(formData);
      if (response) {
        var img = new Blob([new Int8Array(response.data, 0)], {
          type: response.headers["content-type"],
        }); //type类型可自定义
        element["isImage"] = true;
        element["url"] = window.URL.createObjectURL(img);
        item.fileList.push(element);
      }
    },
    fileOpen(item) {
      dd.ready(function () {
        dd.openLink({
          url: item.url,
        })
          .then((res) => {
          })
          .catch((err) => {
            console.error(err);
          });
      });
    },
    getEnumeration: async function (dataguid) {
      let params = {
        accessCode: "688bd3883572440a859dfd8ba9194e7b",
           cityCode: window.localStorage.getItem("citycode")
              ? window.localStorage.getItem("citycode")
              : "441300000000",
        params: {
          dataguid: dataguid,
          searchObject: JSON.stringify([]),
          token: window.localStorage.getItem("token"),
        },
      };
      const res = await FileServerProxy(params);
      let data = JSON.parse(res.data.data).Data
      switch (dataguid) {
        case 'db35edee-88e0-4fae-b14a-868ed4beb1d9':
          this.JBXXcontentData.forEach((item, index) => {
            if (item.name === '建设类型') {
              item.children = data
            }
          })
          break
        case 'd2ec96d4-b5bc-404a-a9f1-34db915c694b':
          this.JBXXcontentData.forEach((item, index) => {
            if (item.name === '用地类型') {
              item.children = data
            }
          })
          break
        case '52215e71-341a-452b-8823-a8d4aae058ab':
          this.JBXXcontentData.forEach((item, index) => {
            if (item.name === '地类_农用地') {
              item.children = data
            }
          })
          break
        case 'c7e2cc1c-1757-4ebb-af08-4fb7bc53ac15':
          this.JBXXcontentData.forEach((item, index) => {
            if (item.name === '申请方式') {
              item.children = data
            }
          })
          break
      }
    },
    getCityOpenDataView: async function () {
      let dataGuid = 'e9c98787-4966-4365-80b0-c1cc678c6f85'
      let token = window.localStorage.getItem('token')
      let params = {
        accessCode: "688bd3883572440a859dfd8ba9194e7b",

        params: {
          dataguid: dataGuid,
          searchObject: JSON.stringify([]),
          token: token,
        },
      };
      const res = await QuerySignCallback(params);
      this.JBXXcontentData.forEach((item, index) => {
        if (item.name === '所属市') {
          item.children = JSON.parse(res.data.data).Data
        }
      })
    },
    getXianOpenDataView: async function (data) {
      let dataGuid = '77fdf2b0-0eb5-4243-a0a4-6185299ccd34'
      let searchObject = JSON.stringify([{ field: 'pid', value: data, operator: '=' }])
      let token = window.localStorage.getItem('token')
      let params = {
        accessCode: "688bd3883572440a859dfd8ba9194e7b",

        params: {
          dataguid: dataGuid,
          searchObject: searchObject,
          token: token,
        },
      };
      const res = await QuerySignCallback(params);
      this.JBXXcontentData.forEach((item, index) => {
        if (item.name === '所属县') {
          item.children = JSON.parse(res.data.data).Data
        }
      })
    },
    getTownOpenDataView: async function (data) {
      let dataGuid = '24d07248-ba49-4b82-9029-b5eccaff179d'
      let searchObject = JSON.stringify([{ field: 'pid', value: data, operator: '=' }])
      let token = window.localStorage.getItem('token')
      let params = {
        accessCode: "688bd3883572440a859dfd8ba9194e7b",

        params: {
          dataguid: dataGuid,
          searchObject: searchObject,
          token: token,
        },
      };
      const res = await QuerySignCallback(params);
      this.JBXXcontentData.forEach((item, index) => {
        if (item.name === '所属镇') {
          item.children = JSON.parse(res.data.data).Data
        }
      })
    },
    getCunOpenDataView: async function (data) {
      let dataGuid = 'd3aaed7c-84ee-4de3-b70e-07fe188cdc8e'
      let searchObject = JSON.stringify([{ field: 'pid', value: data, operator: '=' }])
      let token = window.localStorage.getItem('token')
      let params = {
        accessCode: "688bd3883572440a859dfd8ba9194e7b",

        params: {
          dataguid: dataGuid,
          searchObject: searchObject,
          token: token,
        },
      };
      const res = await QuerySignCallback(params);
      this.JBXXcontentData.forEach((item, index) => {
        if (item.name === '所属村') {
          item.children = JSON.parse(res.data.data).Data
        }
      })
    },
  },
  mounted() {
    this.getEnumeration("db35edee-88e0-4fae-b14a-868ed4beb1d9")
    this.getEnumeration("d2ec96d4-b5bc-404a-a9f1-34db915c694b")
    this.getEnumeration("52215e71-341a-452b-8823-a8d4aae058ab")
    this.getEnumeration("c7e2cc1c-1757-4ebb-af08-4fb7bc53ac15")
    this.rowData = JSON.parse(this.$route.query.data)
    this.getFile()
    this.getCityOpenDataView()
    this.getXianOpenDataView(this.rowData.F_SCITY)
    this.getTownOpenDataView(this.rowData.F_XCITY)
    this.getCunOpenDataView(this.rowData.F_SSZZ)
    dd.ready(function () {
      dd.setTitle({
        title: '详细信息'
      })
        .then(res => {
        })
        .catch(err => {
          console.error(err)
        })
    })
  }
}
</script>
<style scoped lang="scss">
#IdentifiedDetails {
  height: 100vh;
  overflow: auto;
  background: #f6f6f6;
  /*font-size: 14px;*/
  .top {
    height: 122px;
    background: #ffffff;
    margin-bottom: 20px;
    padding-top: 35px;
    text-align: center;
    .origin {
      width: 22px;
      height: 22px;
      background: #007aff;
      border-radius: 50%;
      display: inline-block;
    }
    .line {
      width: 20vw;
      /*height: 1px;*/
      border: 1px dashed #007aff;
      display: inline-block;
    }
  }
  .content {
    width: 100%;
    height: auto;
    background: #ffffff;
    padding: 10px;
    .line {
      width: 6px;
      height: 26px;
      background: #007aff;
      display: inline-block;
    }
    .list ul li {
      min-height: 50px;
      line-height: 50px;
    }
  }
  .file-list ul li {
    display: flex;
    /*justify-content: center;*/
    align-items: center;
    padding: 10px 0;
  }
}
</style>
<style lang="scss">
#IdentifiedDetails {
  .van-cell:not(:last-child)::after {
    left: 0;
    border-bottom: 1px solid rgb(210, 210, 210);
  }
  .van-cell {
    padding: 10px 0;
    font-size: 16px;
  }
  .van-field__control {
    text-align: right;
  }
}
</style>
